<script setup name="Footer">
const currentYear = new Date().getFullYear()
</script>

<template>
  <div class="page-footer">
    <div class="container">
      <div class="footer-copyright">
        <p>河北师范大学 《面向对象程序设计》 PBL 项目</p>
        <p>Copyright © {{ currentYear }} MusicPlayer. All Rights Reserved.</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-footer {
  position: relative;
  margin-top: 30px;
  padding: 40px 0 20px;
  background-color: color-mix(in srgb, var(--bgc-color-2) 40%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px 20px 0 0;
  margin: 30px 20px 0;
  overflow: hidden;

  // 顶部装饰线
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--primary-color) 10%, transparent) 20%,
      color-mix(in srgb, var(--primary-color) 20%, transparent) 50%,
      color-mix(in srgb, var(--primary-color) 10%, transparent) 80%,
      transparent 100%
    );
  }

  .container {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;

    .footer-copyright {
      position: relative;
      color: var(--secondary-color);
      font-size: 14px;
      line-height: 1.8;
      text-align: center;
      padding: 25px 0;
      
      // 中间装饰线
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          color-mix(in srgb, var(--primary-color) 10%, transparent),
          color-mix(in srgb, var(--primary-color) 20%, transparent),
          color-mix(in srgb, var(--primary-color) 10%, transparent),
          transparent
        );
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

      // 装饰点
      &::after {
        content: '';
        position: absolute;
        top: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        opacity: 0.3;
        box-shadow: 
          0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent),
          0 0 8px color-mix(in srgb, var(--primary-color) 10%, transparent);
      }

      p {
        margin: 0;
        transition: color 0.3s ease;
        
        &:first-child {
          color: color-mix(in srgb, var(--secondary-color) 80%, transparent);
          font-weight: 500;
          margin-bottom: 8px;
          letter-spacing: 0.3px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        &:last-child {
          color: color-mix(in srgb, var(--secondary-color) 50%, transparent);
          font-size: 13px;
          letter-spacing: 0.5px;
        }

        &:hover {
          color: color-mix(in srgb, var(--primary-color) 80%, transparent);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-footer {
    margin: 30px 10px 0;
    border-radius: 15px 15px 0 0;
  }
}
</style>
